<template>
    <div style="background-color: #fff;margin: 8px;padding: 20px;height: 100%;">
        <div>
            <h1 class="title">音色 - {{ soundInfo?.sound?.name }}</h1>
        </div>
        <div style="height: calc(100% - 10px);">
            <el-row :gutter="20" style="height: 100%;">
                <el-col :span="8" style="height: 100%;">
                    <el-card style="height: 100%;" shadow="never">
                        <div>
                            <h1 class="title">配置</h1>
                        </div>
                        <div>
                            <el-form label-position="top">
                                <el-form-item label="音色名称">
                                    <el-input placeholder="请输入音色名称。" v-model="soundInfo.name" />
                                </el-form-item>
                                <el-form-item label="音色介绍">
                                    <el-input placeholder="请输入音色介绍。" v-model="soundInfo.introduction" />
                                </el-form-item>
                                <el-form-item label="上传音频（会克隆该音频的音色）">

                                    <div style="width: 100%;">
                                        <el-upload drag :action="VITE_UPLOAD_API_BASE_URL" :data="{ 'id': id }"
                                            :on-success="uploadFileSucess" :show-file-list="true" name="fileList"
                                            accept=".pdf, .doc, .docx, .txt" multiple style="width: 100%;">
                                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                                            <div class="cm-upload-text">
                                                点击或拖动音频附件到此处上传
                                            </div>
                                            <div class="el-upload__tip">
                                                支持 .Mp3, .Wav, .Pcm, .Acc类型
                                            </div>
                                        </el-upload>
                                    </div>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-button style="width: 100%;" type="primary" @click="updateSound">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="16" style="height: 100%;">
                    <el-card style="height: 100%;" shadow="never">
                        <div>
                            <h1 class="title">试听</h1>
                        </div>
                        <!-- {{ generatedText }} -->
                        <div style="height:100% ;">
                            <div>
                                <el-card shadow="never" style="height: 100%;    overflow: auto;">
                                    <div style="width: 100%;">
                                        <h1 class="title">语音合成区域</h1>
                                        <audio controls height="100" style="width: 100%;">
                                            <source src="http://horse.mp3" type="audio/mpeg">
                                            <source src="http://horse.ogg" type="audio/ogg">
                                            <embed height="50" width="100" src="horse.mp3">
                                        </audio>
                                    </div>
                                </el-card>
                            </div>
                            <div style="margin-top: 8px;">
                                <el-input v-model="message.content" @keyup.enter="sendTTS" :disabled="inputDisabled">
                                    <template #suffix>
                                        <el-icon @click="sendTTS">
                                            <Message />
                                        </el-icon>
                                    </template>
                                </el-input>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script>
import { POST, streamPOST } from '../../util/axios.js'
import axios from 'axios';
export default {
    data() {
        return {
            id: 0,
            generatedText: "",
            inputDisabled: false,
            form: {
                fileList: []
            },
            soundInfo: { id: "", sound_id: "", name: "", introduction: "" },
            message: { "user_id": "", "content": "", "sound_id": "" },
            imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL,
            history: [],
            VITE_UPLOAD_API_BASE_URL: import.meta.env.VITE_UPLOAD_API_BASE_URL,
        }
    },
    methods: {
        async getSoundInfo() {

            let rs = await POST("/soundBank/getSoundInfo", "POST", { id: this.id }, false)
            console.log("rs:>>:", rs)
            this.soundInfo = rs.data

        },
        async updateSound() {

            let rs = await POST("/soundBank/updateSound", "POST", this.soundInfo, true)
            console.log("rs:>>:", rs)
            this.getSoundInfo()

        },
        async sendTTS() {

            let requestTask = await POST('/soundBank/tts', this.message)


        }
    },
    mounted() {
        this.id = this.$route.params.id || 0
        console.log(this.id)
        this.getSoundInfo()
    }
}
</script>
<style>
.el-card__body {
    height: 100% !important;
}
</style>